<template>
	<view class="">
		<view @touchmove.stop.prevent :class="isshowpopup ? 'shade' : ''"></view>
		<view class="main">
			<view class="classlist">
				<view class="" v-for="(i, inx) in shoppingClassList" :key="i.id">
					<!-- 1 -->
					<view class="" @click="goShoppingDetail(i.id)"><image :src="i.image" mode=""></image></view>
					<!-- 2 -->
					<view class="">
						<view class="">
							<text class="zhaopai">招牌</text>
							<view class="sp_title">{{ i.store_name }}</view>
						</view>
						<view class="subtitle">{{ i.store_info }}</view>
						<view class="">
							<view class="">
								<view class="">
									<text>￥</text>
									{{ i.is_spec == 0 ? i.price : i.specs[0].price }}
								</view>
								<view class="vip-price">￥{{ i.is_spec == 0 ? i.vip_price : i.specs[0].vip_price }}</view>
							</view>
							<view @click="joinShoppingCart(i.id, 1, 0, i.is_spec, i)" class="card-pic">
								<image src="http://www.szzn.group/uploads/20221108/ee33960e3c3e87df81a677bf08d52250.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view class="zanwu" v-if="shoppingClassList.length == 0"><view class="">暂无商品数据</view></view>
			</view>
			<view class="fooder" @click="goShoppingCard">
				<view class="jiaobiao">
					<image src="http://www.szzn.group/uploads/20221108/2fad7aff79570662bae785dc9f8c06f3.png" mode=""></image>
					<view class="count" v-if="countLength != 0">
						<view class="">{{ countLength }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部弹出框 -->
		<view class="popup" v-show="isshowpopup" @touchmove.stop.prevent>
			<!-- 关闭弹窗 -->
			<view class="" @click="closePopup"><image src="http://one-huoke.oss-cn-hangzhou.aliyuncs.com/6f924202209222017187961.png" mode=""></image></view>
			<view class="">
				<view class=""><image :src="images" mode=""></image></view>
				<view class="">
					<view class="">
						<view class="">￥{{ shoppingPrice == '' ? '' : shoppingPrice }}</view>
						<view class="">库存：{{ shoppingSales }}件</view>
					</view>
					<view class="" style="color: #289958;">会员:￥{{ shoppingMemberPrice }}</view>
					<!-- <view class="">一箱，公一袋</view> -->
				</view>
			</view>
			<!-- 规格 -->
			<view class="">
				<view class="">规格</view>
				<view class="guigelist">
					<view class="">
						<scroll-view scroll-y="true" class="scroll-Y" :show-scrollbar="false">
							<view style="display: flex;flex-wrap: wrap;justify-content: flex-start;" class="">
								<view
									v-for="(i, index) in specsList"
									:key="i.id"
									@click="selectSpecification(i, index)"
									:class="specificationindex == index ? 'selectactive' : ''"
									class="specification"
								>
									{{ i.sku }}
								</view>
							</view>
						</scroll-view>

						<!-- <view @click="selectSpecification(i, index)" :class="specificationindex == index ? 'selectactive' : ''" class="specification">{{ i.sku }}</view> -->
					</view>
				</view>
			</view>
			<!-- 数量 -->
			<view class="count">
				<view class="">数量</view>
				<view class="">
					<view class="" @click="buyNum(0)">-</view>
					<view class="">{{ buynum }}</view>
					<view class="" @click="buyNum(1)">+</view>
				</view>
			</view>

			<view class=""><view class="" @click="specs">加入购物车</view></view>
		</view>
	</view>
</template>

<script>
import { classLtShoppingClass, getShoppingCartData, jionShoppingCart, updateShoppingCount } from '@/api/api.js';
export default {
	data() {
		return {
			shoppingClassList: [],
			isshowpopup: false, //是否打开弹窗,
			specificationindex: 0, //规格序号
			buynum: 1, //购买数量
			specsList: [],
			specsId: '', //规格ID
			shoppingId: '', //商品ID
			shoppingPrice: '',
			shoppingMemberPrice: '',
			images: '',
			classId: '',
			className: '',
			shoppingSales: '',
			countLength: 0,
			cardGoodsList: []
		};
	},
	onLoad(options) {
		uni.showLoading({})
		this.classId = options.id;
		this.className = options.name;
		this.classLtShoppingClass(options.id);
		uni.setNavigationBarTitle({
			title: options.name
		});
	},
	onShow() {
		uni.showLoading({})
		this.getShoppingCartData();
	},
	// 分享
	onShareAppMessage() {
		return {
			title: this.className,
			path: 'page_class/classlist/classlist?id=' + this.classId
		};
	},
	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: this.className,
			path: 'page_class/classlist/classlist?id=' + this.classId
		};
	},
	methods: {
		getShoppingCartData() {
			this.countLength = 0
			getShoppingCartData().then(res => {
				if (res.data.code == '200') {
					uni.hideLoading()
					this.cardGoodsList = res.data.data;
					for (var i in this.cardGoodsList) {
						var listGoods = this.cardGoodsList[i].cartInfo;
						for (var j in listGoods) {
							this.countLength++;
							this.$forceUpdate();
						}
					}
				} else {
					uni.hideLoading()
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon:'error'
					});
				}
			});
		},
		// 获取商品分类
		classLtShoppingClass(id) {
			let data = `cId=${id}`;
			classLtShoppingClass(data).then(res => {
				this.shoppingClassList = res.data.data.list;
			});
		},
		// 立即购买-加入购物车-规格
		immediately() {
			this.isshowpopup = true;
		},
		// 关闭弹窗
		closePopup() {
			this.isshowpopup = false;
		},
		// 选择规格
		selectSpecification(i, index) {
			console.log(i);
			this.shoppingPrice = i.price;
			this.shoppingMemberPrice = i.vip_price;
			this.specificationindex = index;
			this.shoppingSales = i.stock;
			this.specsId = i.id;
		},
		// 购买数量
		buyNum(type) {
			console.log(this.shoppingId);
			if (type == 0) {
				if (this.buynum == 1) return;
				else {
					this.buynum--;
					let data = `cartId=${this.shoppingId}&cartNum=${this.buynum}`;
					updateShoppingCount(data).then(res => {
						console.log(res);
					});
				}
			} else {
				this.buynum++;
				let data = `cartId=${this.shoppingId}&cartNum=${this.buynum}`;
				updateShoppingCount(data).then(res => {
					console.log(res);
				});
			}
		},
		// 加入购物车
		joinShoppingCart(id, cartNum, count, is_specs, i) {
			if (uni.getStorageSync('token') == '' || uni.getStorageSync('token') == null) {
				uni.showModal({
					title: '提示',
					content: '未登入,请先登入',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/page_login/index/index'
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return;
			}
			if (i.stock == 0 || i.stock == '' || i.stock == null || i.stock == undefined) {
				uni.showToast({
					title: '该商品库存不足',
					duration: 1200,
					icon:'error'
				});
				return;
			}
			this.shoppingId = id;
			if (is_specs > 0) {
				this.isshowpopup = true;
				this.shoppingClassList.forEach(item => {
					if (item.id == id) {
						this.images = item.image;
						this.shoppingPrice = item.specs[0].price;
						this.shoppingMemberPrice = item.specs[0].vip_price;
						this.shoppingSales = item.specs[0].stock;
						this.specsList = item.specs;
					}
				});
			} else {
				let data = `productId=${id}&cartNum=${cartNum}&spec_id=${count}`;
				jionShoppingCart(data).then(res => {
					if (res.data.code == '200') {
						uni.showToast({
							title: '加入成功',
							duration: 1000
						});
						this.getShoppingCartData();
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 1300,
							icon:'error'
						});
					}
				});
			}
		},
		// 多规格
		specs() {
			console.log(1234);
			if (this.specsId == '') {
				this.specsId = this.specsList[0].id;
			}
			let data = `productId=${this.shoppingId}&cartNum=${this.buynum}&spec_id=${this.specsId}`;
			jionShoppingCart(data).then(res => {
				if (res.data.code == '200') {
					uni.showToast({
						title: '加入成功',
						duration: 1000
					});
					this.isshowpopup = false
					this.getShoppingCartData();
				} else {
					uni.showToast({
						title: res.data.msg,
						duration: 1300,
						icon:'error'
					});
				}
			});
		},
		// 去详情
		goShoppingDetail(id) {
			uni.navigateTo({
				url: '/page_home/agriculturaldetail/agriculturaldetail?id=' + id
			});
		},
		goShoppingCard() {
			uni.switchTab({
				url: '/pages/shoppingcart/index/index'
			});
		}
	}
};
</script>

<style lang="scss">
.main {
	padding: 20rpx;
}
// 遮罩层
.shade {
	position: fixed;
	width: 100vw;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 10;
}
.classlist {
	> view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #eee;
		padding: 20rpx 0;
		margin-bottom: 10rpx;

		> view:nth-child(1) {
			flex: 1;
			image {
				width: 235rpx;
				height: 235rpx;
				margin-right: 20rpx;
				border-radius: 15rpx;
			}
		}

		> view:nth-child(2) {
			flex: 2;
			// display: flex;
			// justify-content: space-between;
			> view:nth-child(1) {
				font-size: 30rpx;
				line-height: 1.7;
				display: flex;
				text {
					color: #fff;
					width: 50rpx;
					padding: 5rpx 10rpx;
					background-color: #6fc36f;
					border-radius: 10rpx;
					margin-right: 8rpx;
				}
			}

			> view:nth-child(2) {
				color: #ccc;
				font-size: 28rpx;
				padding: 15rpx 0 20rpx;
			}

			> view:nth-child(3) {
				display: flex;
				justify-content: space-between;
				align-items: center;

				> view:nth-child(1) {
					> view:nth-child(1) {
						color: #ee7b89;
						font-size: 34rpx;
						margin: 10rpx 0;
						text {
							font-size: 24rpx;
						}
					}
				}

				> view:nth-child(2) {
					border-radius: 50px;
					padding: 17rpx 30rpx;
					// background-color: #5da96b;
					color: #fff;
				}
			}
		}
	}
}

.fooder {
	position: fixed;
	bottom: 200rpx;
	right: 0;
	.jiaobiao {
		color: #fff;
		border-radius: 15rpx;
		padding: 12rpx 25rpx;
		font-size: 28rpx;
		image {
			width: 110rpx;
			height: 110rpx;
		}
		.count {
			position: absolute;
			top: 30rpx;
			left: 100rpx;
			view {
				background-color: #d43030;
				color: #fff;
				border-radius: 50%;
				width: 35rpx;
				height: 35rpx;
				text-align: center;
				line-height: 35rpx;
				font-size: 22rpx;
			}
		}
	}
}

.popup {
	position: fixed;
	bottom: 0;
	background-color: #fff;
	height: 1100rpx;
	border-radius: 20rpx;
	padding: 20rpx 0;
	z-index: 100;
	width: 100%;
	animation: move 0.3s;
	> view:nth-child(1) {
		text-align: right;

		image {
			width: 50rpx;
			height: 50rpx;
			margin-right: 30rpx;
		}
	}

	> view:nth-child(2) {
		display: flex;

		image {
			padding: 0 40rpx;
			width: 180rpx;
			height: 180rpx;
			border-radius: 20rpx;
		}

		> view:nth-child(2) {
			flex: 2;
			padding: 15rpx 30rpx 15rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			> view:nth-child(1) {
				display: flex;
				justify-content: space-between;

				> view:nth-child(1) {
					flex: 1;
					font-size: 34rpx;
					font-weight: 700;
				}

				> view:nth-child(2) {
					font-size: 28rpx;
					color: #ccc;
				}
			}

			> view:nth-child(3) {
				font-size: 24rpx;
				color: #ccc;
			}
		}
	}

	> view:nth-child(3) {
		padding: 40rpx;
		// height: 600rpx;
		// overflow: hidden;
		// overflow-x: hidden;
		// overflow-y: scroll;
		> view:nth-child(1) {
			font-size: 30rpx;
		}

		> view:nth-child(2) {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;

			view {
				.specification {
					margin: 10rpx 8rpx;
					border-radius: 50px;
					padding: 18rpx 30rpx;
					font-size: 26rpx;
					color: #888;
					background-color: #f5f5fa;
				}
			}
		}
	}
	> view:nth-child(3)::-webkit-scrollbar {
		display: none;
	}
	> view:nth-child(4) {
		padding: 0 40rpx;
		display: flex;
		justify-content: space-between;

		> view:nth-child(2) {
			display: flex;
			text-align: center;

			> view:nth-child(1) {
				border-radius: 5rpx;
				width: 60rpx;
				height: 60rpx;
				line-height: 60rpx;
				background-color: #eeeef3;
			}

			> view:nth-child(2) {
				border-radius: 5rpx;
				width: 100rpx;
				height: 60rpx;
				line-height: 60rpx;
				background-color: #eeeef3;
				margin: 0 10rpx;
			}

			> view:nth-child(3) {
				border-radius: 5rpx;
				width: 60rpx;
				height: 60rpx;
				line-height: 60rpx;
				background-color: #258f52;
				color: #fff;
			}
		}
	}

	> view:nth-child(5) {
		position: fixed;
		text-align: center;
		bottom: 40rpx;
		left: 7%;
		width: 600rpx;
		border-radius: 50px;
		background-color: #289958;
		padding: 25rpx;
		color: #fff;
	}
}

.selectactive {
	background-color: #eefbf1 !important;
	color: #40a56b !important;
}

.vip-price {
	background: url('http://www.szzn.group/uploads/20221107/cff5eef9aff3b57dec33fbfeb9ddc5b7.png') no-repeat;
	background-size: 100% 100%;
	width: 180rpx;
	font-size: 28rpx;
	color: #438062;
}
.subtitle {
	width: 450rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.card-pic {
	image {
		width: 50rpx;
		height: 50rpx;
	}
}
.zhaopai {
	font-size: 24rpx;
}
.count {
	position: fixed;
	bottom: 150rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 670rpx;
}
.zanwu {
	view {
		color: #ccc;
		font-size: 26rpx;
		width: 100vw;
		text-align: center;
	}
}
.sp_title {
	display: inline-block;
	width: 400rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@keyframes move {
	0% {
		height: 0;
	}
	100% {
		height: 1100rpx;
	}
}
.scroll-Y {
	height: 550rpx;
}
</style>
